<template>
  <div class="register-container">
    <div class="register-wrapper">
      <div class="content">
        <!-- 标题样式-->
        <div class="title">您好，欢迎使用</div>
        <!-- 副标题样式-->
        <div class="subtitle">算网一体编排调度平台</div>
        <div style="width: 200px; position: relative; left: 100px">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane style="width: 50%" label="企业用户" name="企业用户" />
            <el-tab-pane style="width: 50%" label="普通用户" name="普通用户" />
          </el-tabs>
        </div>
        <!-- 注册表格-->
        <el-form
          ref="registForm"
          class="login-form"
          :rules="registRules"
          label-position="right"
          label-width="10px"
          :model="registForm"
        >
          <!-- 用户名-->
          <el-form-item label=" " prop="username">
            <div class="form-item-content">
              <img
                class="iconClass"
                src="@/assets/imgs/register/userName.png"
                alt=""
              />
              <el-input
                v-model="registForm.username"
                class="form-item-input"
                type="text"
                placeholder="请输入用户名"
                clearable
              />
            </div>
          </el-form-item>
          <!-- 邮箱-->
          <el-form-item label=" " prop="email">
            <div class="form-item-content">
              <img
                class="iconClass"
                src="@/assets/imgs/register/email.png"
                alt=""
              />
              <el-input
                v-model="registForm.email"
                class="form-item-input"
                type="text"
                placeholder="请输入邮箱"
                clearable
              />
            </div>
          </el-form-item>
          <!-- 密码-->
          <el-form-item label=" " prop="password">
            <div class="form-item-content">
              <img
                class="iconClass"
                src="@/assets/imgs/register/password.png"
                alt=""
              />
              <el-input
                v-model="registForm.password"
                class="form-item-input"
                type="text"
                placeholder="请输入密码"
                show-password
                clearable
              />
            </div>
          </el-form-item>
          <!-- 密码确认-->
          <el-form-item label=" " prop="checkPass">
            <div class="form-item-content">
              <img
                class="iconClass"
                src="@/assets/imgs/register/checkPass.png"
                alt=""
              />
              <el-input
                v-model="registForm.checkPass"
                class="form-item-input"
                type="text"
                show-password
                placeholder="请再次输入密码"
                clearable
              />
            </div>
          </el-form-item>
          <el-form-item label=" " prop="name">
            <div class="form-item-content">
              <img
                class="iconClass"
                src="@/assets/imgs/register/name.png"
                alt=""
              />
              <el-input
                v-model="registForm.name"
                class="form-item-input"
                type="text"
                placeholder="请输入姓名"
                clearable
              />
            </div>
          </el-form-item>
          <!-- 手机号-->
          <el-form-item label=" " prop="phone">
            <div class="form-item-content">
              <img
                class="iconClass"
                src="@/assets/imgs/register/phone.png"
                alt=""
              />
              <el-input
                v-model="registForm.phone"
                class="form-item-input"
                type="text"
                placeholder="请输入手机号"
                clearable
              />
            </div>
          </el-form-item>
          <!-- 用人单位-->
          <el-form-item
            v-if="activeName === '企业用户'"
            label=" "
            prop="employer"
          >
            <div class="form-item-content">
              <img
                class="iconClass"
                src="@/assets/imgs/register/employer.png"
                alt=""
              />
              <el-input
                v-model="registForm.employer"
                class="form-item-input"
                type="text"
                placeholder="请输入用人单位"
                clearable
              />
            </div>
          </el-form-item>
          <el-form-item
            v-if="activeName !== '企业用户'"
            label=" "
            prop="employer"
          >
            <div class="form-item-content">
              <el-select
                v-model="registForm.employer"
                :popper-append-to-body="false"
                style="width: 100%"
                filterable
                placeholder="请选择用人单位"
              >
                <el-option
                  v-for="item in employerOptions"
                  :key="item.key"
                  :label="item.value"
                  :value="item.value"
                />
              </el-select>
            </div>
          </el-form-item>
          <!-- 验证码-->
          <el-form-item label=" " prop="seccode">
            <div class="form-item-content">
              <el-input
                v-model="registForm.seccode"
                class="form-item-input"
                placeholder="验证码"
              />
              <img
                style="height: 40px; position: relative; left: 12px"
                :src="codeImage"
                @click="createCode"
              />
            </div>
          </el-form-item>
        </el-form>
        <el-button
          class="login-btn"
          type="primary"
          @click="registerConfirm"
        >注 &nbsp;&nbsp;&nbsp;册</el-button>
        <el-row type="flex" justify="end">
          <div class="register-btn" @click="toLogin">已有账号？点此登录</div>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { registUser, getCompanys } from '@/api/user'
const server = axios.create({
  tiomout: 5000 // 请求延时
})
server.interceptors.request.use(
  (config) => {
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)
export default {
  name: 'Register',
  components: {},
  mixins: [],
  data() {
    /**
     * @description: 注册校验
     * @description: 手机号
     * @return {*}
     */
    const validatorPhone = function(phone, value, callback) {
      const reg =
        /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/
      if (value === '') {
        callback()
      } else if (!reg.test(value)) {
        callback(new Error('手机号格式错误'))
      } else {
        callback()
      }
    }
    /**
     * @description: 注册校验
     * @description: 用户名
     * @return {*}
     */
    const validateName = (rule, value, callback) => {
      const reg = /^[\w\d]+$/u
      if (value.trim() === '') {
        return callback(new Error('用户名不能为空！'))
      } else if (!reg.test(value)) {
        return callback(new Error('用户名由数字，字母，下划线组成!'))
      } else {
        callback()
      }
    }
    /**
     * @description: 注册校验
     * @description: 密码
     * @return {*}
     */
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('密码不能为空!'))
      } else {
        if (this.registForm.checkPass !== '') {
          // 对第二个密码框单独验证
          this.$refs.registForm.validateField('checkPass')
        }
        callback()
      }
    }
    /**
     * @description: 注册校验
     * @description: 密码确认
     * @return {*}
     */
    const validatePassCheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('确认密码不能为空!'))
      } else if (value !== this.registForm.password) {
        callback(new Error('两次密码不一致!'))
      } else {
        callback()
      }
    }
    /**
     * @description: 注册校验
     * @description: 邮箱
     * @return {*}
     */
    const checkEmail = (rule, value, callback) => {
      var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
      // let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      if (value.trim() === '') {
        return callback(new Error('企业邮箱不能为空!'))
      } else if (!reg.test(value)) {
        return callback(new Error('请输入正确的企业邮箱!'))
      } else {
        callback()
      }
    }
    return {
      activeName: '企业用户',
      codeImage: '', // 验证码
      employerOptions: [],
      registForm: {
        username: '', // 用户名
        email: '', // 邮箱
        password: '', // 密码
        checkPass: '', // 密码确认
        name: '',
        phone: '', // 电话
        employer: '', // 用人单位
        seccode: '' // 验证码
      },
      // 表单校验
      registRules: {
        username: [
          // 用户名
          { required: true, validator: validateName, trigger: 'blur' },
          {
            type: 'string',
            max: 20,
            message: '用户名最多20个字符！',
            trigger: 'blur'
          }
        ],
        password: [
          // 密码
          { required: true, validator: validatePass, trigger: 'blur' },
          {
            type: 'string',
            min: 6,
            max: 16,
            message: '请输入6至16位密码',
            trigger: 'blur'
          }
        ],
        checkPass: [
          // 密码确认
          { required: true, validator: validatePassCheck, trigger: 'blur' },
          {
            type: 'string',
            min: 6,
            max: 16,
            message: '请输入6至16位密码',
            trigger: 'blur'
          }
        ],
        phone: [
          // 电话
          {
            required: false,
            validator: validatorPhone,
            trigger: 'blur',
            type: 'number'
          }
        ],
        seccode: [
          // 验证码
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ],
        email: [
          // 邮箱
          { required: true, validator: checkEmail, trigger: 'blur' },
          {
            type: 'string',
            max: 50,
            message: '邮箱最多50个字符！',
            trigger: 'blur'
          }
        ],
        employer: [
          // 验证码
          { required: true, message: '用人单位不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.createCode() // 获取验证码
    this.getCompanyList()
  },
  methods: {
    /**
     * @description: 切换用户触发
     * @description: 清空表格数据
     * @return {*}
     */
    handleClick() {
      this.$refs['registForm'].clearValidate()
      this.registForm = {
        username: '', // 用户名
        email: '', // 邮箱
        password: '', // 密码
        checkPass: '', // 密码确认
        name: '',
        phone: '', // 电话
        employer: '', // 用人单位
        seccode: '' // 验证码
      }
    },
    /**
     * @description: 获取验证码
     * @description: 每次点击都会触发
     * @return {*}
     */
    createCode() {
      axios.get('/captcha', { responseType: 'blob' }).then((response) => {
        this.codeImage = window.URL.createObjectURL(response.data)
      })
    },
    /**
     * @description: 获取所有单位
     * @description: 进入页面触发
     * @return {*}
     */
    getCompanyList() {
      getCompanys({ id: '' }).then((res) => {
        if (res.code === 200) {
          this.employerOptions = res.data
        }
      })
    },
    /**
     * @description: 点击跳转
     * @description: 每次点击都会触发
     * @return {*}
     */
    toLogin() {
      this.$router.replace({
        path: '/login',
        query: this.$route.query
      })
    },
    /**
     * @description: 提交注册信息
     * @description: 确认校验参数
     * @return {*}
     */
    registerConfirm() {
      this.$refs['registForm'].validate((valid) => {
        if (valid) {
          let team = ''
          if (this.activeName === '普通用户') {
            for (const item in this.employerOptions) {
              if (
                this.employerOptions[item].value === this.registForm.employer
              ) {
                team = this.employerOptions[item].key
              }
            }
          }
          const data = {
            username: this.registForm.username, // 用户名
            email: this.registForm.email, // 邮箱
            password: this.registForm.password, // 密码
            phonenum: this.registForm.phone, // 电话
            company: this.registForm.employer, // 用人单位
            code: this.registForm.seccode, // 验证码
            team: team,
            name: this.registForm.name,
            roleIndex: this.activeName === '企业用户' ? '3' : '2'
          }
          registUser(data).then((res) => {
            // code==200是正常返回
            if (res.code === 200) {
              this.$Message.success('用户注册成功，审核通过后即可登录') // 弹窗提示
              this.registForm = {
                // 重置表单
                username: '',
                email: '',
                password: '',
                checkPass: '',
                phone: '',
                employer: '',
                seccode: ''
              }
              this.createCode() // 重新加载验证码
            } else {
              // 数据查询失败
              // 输出报错信息
              // 重新加载验证码
              this.$Message.error(res.message)
              this.createCode()
            }
          }) // 注册接口
        } else {
          // 弹窗提示
          this.$Message.error({
            content: '表单验证失败',
            duration: 1.5
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.register-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: url("~@/assets/imgs/bg_login.png") no-repeat center;
  background-size: cover;

  .register-wrapper {
    position: absolute;
    top: 50%;
    right: 9.1%;
    transform: translateY(-50%);
    min-width: 480px;
    max-height: 88vh;
    overflow-y: auto;
    width: 28%;
    // height: 87%;
    box-sizing: border-box;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.05) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 7px;
    display: flex;
    align-items: flex-start;
    justify-content: center;

    &::-webkit-scrollbar {
      width: 5px;
    }
    &::-webkit-scrollbar-track-piece {
      background: #f3f3f3;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background: #cccccc;
    }

    .content {
      margin: 3vh 0;
      width: 75%;
      .title {
        .textStyle(28px , 300, rgba(248, 248, 248, 1));
        line-height: 42px;
        letter-spacing: 1px;
        text-shadow: 0px 0px 4px rgba(10, 25, 53, 0.5);
      }
      .subtitle {
        .textStyle(37px, 600);
        background-image: -webkit-linear-gradient(
          bottom,
          rgba(0, 234, 255, 1),
          rgba(0, 159, 255, 1)
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        line-height: 50px;
        line-height: 50px;
        letter-spacing: 2px;
        margin-bottom: 6px;
        margin-top: 5px;
      }
      .iconClass {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }
      .login-form {
        // width: 420px;
        .el-form-item {
          margin-bottom: 22px;

          /deep/ .el-form-item__label {
            .textStyle(14px, 500, #B0BBCB);
            line-height: 20px;
            height: 20px;
            margin-bottom: 5px;
          }

          .form-item-content {
            //width: 420px;
            height: 40px;
            background: rgba(109, 131, 174, 0.2);
            box-shadow: 2px 2px 4px -4px rgba(201, 197, 218, 0.47);
            border-radius: 5px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding: 0 12px;
            border: 1px solid rgba(164, 183, 209, 0.4);
            .form-item-input {
              box-sizing: border-box;
              /deep/ .el-input__inner {
                height: 38px !important;
                padding-left: 0px;
                width: 100%;
                height: 100%;
                background-color: transparent;
                //border: 1px solid rgba(109, 131, 174, 0.20) !important;
                .textStyle(16px, 400, #fff);

                &::placeholder {
                  .textStyle(16px, 400, #B0BBCB);
                }
              }
            }
          }
        }
      }

      .login-btn {
        width: 100%;
        height: 48px;
        background: linear-gradient(270deg, #03e4ff 0%, #006eff 100%);
        border-radius: 1px;
        border: none;
        .textStyle(18px, 600, #FFFFFF);
        margin-top: 10px;
      }

      .register-btn {
        margin-top: 15px;
        .textStyle(16px, 400, #32c5ff);
        line-height: 22px;
        cursor: pointer;
      }
    }
  }
}
</style>
<style lang="less">
.register-container {
  .el-tabs__item {
    width: 100px !important;
    text-align: center !important;
    color: rgba(169, 185, 205, 1) !important;
    font-size: 16px;
  }
  .el-tabs__item.is-active {
    color: rgba(39, 178, 255, 1) !important;
  }

  .el-input__inner {
    background-color: transparent;
    border: none;
    font-size: 16px !important;
    color: #fff !important;
    font-weight: 400 !important;
    padding: 0 12px !important;
  }
  .el-select-dropdown {
    border: 1px solid rgba(164, 183, 209, 0.4) !important;
    background-color: transparent !important;
  }
  .el-select .el-input .el-select__caret {
    color: rgba(235, 240, 245, 1) !important;
  }
  .el-select-dropdown__item {
    color: rgba(235, 240, 245, 1) !important;
  }
  .el-select-dropdown__list {
    background: rgba(64, 84, 122, 0.8) !important;
  }
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: rgba(64, 84, 122) !important;
  }
}
</style>
